import { useState } from 'react';
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
import { Layout, Card, Typography, Row, Col, Tooltip, Divider } from 'antd';
import { FileTextOutlined, IdcardOutlined, TranslationOutlined, FileImageOutlined } from '@ant-design/icons';
import DocumentConvertPage from './pages/DocumentConvertPage';
import PhotoProcessPage from './pages/PhotoProcessPage';
import TranslationPage from './pages/TranslationPage';
import PPTGeneratePage from './pages/PPTGeneratePage';

const { Header, Content, Footer } = Layout;
const { Title, Paragraph, Text } = Typography;

// 工具定义
const tools = [
  {
    id: 'document-convert',
    title: '文档格式转换',
    icon: <FileTextOutlined style={{ fontSize: 32 }} />,
    description: '支持多种文档格式之间的相互转换，如Word转PDF、HTML转TXT等',
    color: '#1890ff',
    path: '/document-convert'
  },
  {
    id: 'photo-process',
    title: '证件照处理',
    icon: <IdcardOutlined style={{ fontSize: 32 }} />,
    description: '快速更换证件照背景颜色（红底/白底/蓝底），裁剪标准尺寸',
    color: '#52c41a',
    path: '/photo-process'
  },
  {
    id: 'translation',
    title: '英文翻译',
    icon: <TranslationOutlined style={{ fontSize: 32 }} />,
    description: '支持多种语言之间的文本翻译，快速获取准确的翻译结果',
    color: '#faad14',
    path: '/translation'
  },
  {
    id: 'ppt-generate',
    title: 'PPT生成',
    icon: <FileImageOutlined style={{ fontSize: 32 }} />,
    description: '根据模板快速生成各类PPT，支持商务、教育、报告等多种类型',
    color: '#f5222d',
    path: '/ppt-generate'
  }
];

function App() {
  const [currentTool, setCurrentTool] = useState(null);

  // 首页组件
  const HomePage = () => (
    <div>
      <Title level={2} style={{ textAlign: 'center', marginBottom: 32 }}>
        欢迎使用工具集成网站
      </Title>
      <Paragraph style={{ textAlign: 'center', marginBottom: 32, color: '#666' }}>
        我们提供多种实用工具，帮助您高效完成文档处理、图片编辑、翻译和演示文稿制作等任务
      </Paragraph>
      
      <Row gutter={[16, 24]}>
        {tools.map((tool) => (
          <Col xs={24} sm={12} md={12} lg={6} key={tool.id}>
            <Link to={tool.path} style={{ textDecoration: 'none' }}>
              <Card
                hoverable
                className="tool-card"
                styles={{ body: { padding: 24, textAlign: 'center' } }}
                onClick={() => setCurrentTool(tool.id)}
              >
                <div style={{ color: tool.color, marginBottom: 16 }}>
                  {tool.icon}
                </div>
                <Title level={4} style={{ marginBottom: 12 }}>
                  {tool.title}
                </Title>
                <Paragraph style={{ color: '#666' }}>
                  {tool.description}
                </Paragraph>
              </Card>
            </Link>
          </Col>
        ))}
      </Row>

      <Divider style={{ margin: '48px 0' }} />
      
      <div style={{ textAlign: 'center', padding: 24 }}>
        <Title level={5} style={{ marginBottom: 16 }}>使用指南</Title>
        <Row gutter={[16, 16]}>
          <Col xs={24} md={12}>
            <Card hoverable styles={{ body: { padding: 16 } }}>
              <Typography.Text strong style={{ display: 'block', marginBottom: 8 }}>如何选择工具？</Typography.Text>
              <Typography.Text type="secondary">根据您的需求，点击对应的工具卡片进入相应功能页面。</Typography.Text>
            </Card>
          </Col>
          <Col xs={24} md={12}>
            <Card hoverable styles={{ body: { padding: 16 } }}>
              <Typography.Text strong style={{ display: 'block', marginBottom: 8 }}>文件保存说明</Typography.Text>
              <Typography.Text type="secondary">处理完成后，系统会自动提示您下载处理后的文件。</Typography.Text>
            </Card>
          </Col>
        </Row>
      </div>
    </div>
  );

  return (
    <Router>
      <Layout className="app-container">
        <Header className="header">
          <Title level={1} style={{ margin: 0, color: 'white' }}>工具集成网站</Title>
        </Header>
        
        <Content className="content">
          <Routes>
            <Route path="/" element={<HomePage />} />
            <Route path="/document-convert" element={<DocumentConvertPage />} />
            <Route path="/photo-process" element={<PhotoProcessPage />} />
            <Route path="/translation" element={<TranslationPage />} />
            <Route path="/ppt-generate" element={<PPTGeneratePage />} />
          </Routes>
        </Content>
        
        <Footer style={{ textAlign: 'center', backgroundColor: '#f5f5f5', borderTop: '1px solid #f0f0f0' }}>
          © 2025 工具集成网站 - 为您提供高效便捷的办公工具
        </Footer>
      </Layout>
    </Router>
  );
}

export default App;